<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>拖拽回放</title>
</head>
<style>
       html,
        body {
            overflow: hidden;
        }

        body,
        div,
        h3,
        p {
            margin: 0;
            padding: 0;
        }

        body {
            color: #fff;
            background:yellow;
            font: 12px/2 Arial;
        }

        p {
            padding: 0 10px;
            margin-top: 10px;
        }

        span {
            color: #ff0;
            padding-left: 5px;
        }

        #box {
            position: absolute;
            width: 300px;
            height: 150px;
            background: #333;
            border: 2px solid #ccc;
            left: 0px;
            top: 0px;
        }

        #box h3 {
            height: 25px;
            line-height: 25px;
            cursor: move;
            background: #222;
            border-bottom: 2px solid #ccc;
            text-align: right;
            padding: 0 10px;
        }

        #box h3 a {
            color: #fff;
            font: 12px/25px Arial;
            text-decoration: none;
            outline: none;
        }
</style>
<script src="js/utils.js"></script>
<body>
    <div id='box'>
        <h3>
            <a id="btn" href="#">点击播放拖动轨迹</a>
        </h3>
        <p><strong>Drag</strong> <span>false</span></p>
        <p><strong>offsetLeft:</strong> <span>0</span></p>
        <p><strong>offsetTop</strong> <span>0</span></p>
    </div>
    <script>  
         var h3=document.querySelector('h3');
         var box=document.querySelector('#box');
         var btn=document.querySelector('#btn');
        //  记录拖拽的移动轨迹,定义一个数组接收
        var arr=[];
       h3.onmousedown=function(e){
           var tx=e.offsetX;
           var ty=e.offsetY;
        // 通过移动过程中的left和top值记录出移动的路径
        var obj={};
        // slice() 方法可从已有的数组中返回选定的元素。
        obj.x=getStyle(box,'left').slice(0,-2);
        obj.y=getStyle(box,'top').slice(0,-2);
        arr.unshift(obj);
        document.onmousemove=function(evt){
            box.style.left=evt.clientX-tx+'px';
            box.style.top=evt.clientY-ty+'px';
            // evt.cleintX光标在浏览器可视窗口的位置
             var rong={};
             rong.x=evt.clientX-tx;
             rong.y=evt.clientY-ty;
             arr.unshift(rong);
        }
       }
       document.onmouseup=function(){
           document.onmousemove=null;
       }
       btn .onclick=function(){
        //    点击回放时按照原来的路移动
           var index=0;
               // 因为是一个动画的过程所以需要定时器
           var times=setInterval(function(){
               box.style.left=arr[index].x+'px';
               box.style.top=arr[index].y+'px';
               index++;
               if(index>=arr.lenght){
                   clearInterval(times);
                   arr=[];
                // 有定时器就要清空
               }
           },30)
       }
       
    </script>
    
    
</body>
</html>